<template>
  <div>
    <el-form-item label="默认查询数据">
      <el-switch v-model="localData.autoLoad" />
    </el-form-item>
    <el-form-item label="支持分页">
      <el-switch v-model="localData.page" />
    </el-form-item>
    <el-form-item label="分页位置" v-if="localData.page">
      <el-radio v-model="localData.pagePosition" value="top">上</el-radio>
      <el-radio v-model="localData.pagePosition" value="bottom">下</el-radio>
    </el-form-item>
    <el-form-item label="分页组件选择" v-if="localData.page">
      <el-select v-model="localData.pagination">
        <el-option v-for="opt in paginationList" :label="opt.label" :value="opt.name" :key="opt.name" />
      </el-select>
    </el-form-item>
    <el-form-item label="初始分页大小" v-if="localData.page">
      <el-input-number v-model="localData.pageSize" controls-position="right" />
    </el-form-item>
    <el-form-item label="展示序号">
      <el-switch v-model="localData.showIndex" />
    </el-form-item>
    <el-form-item label="开启按钮操作">
      <el-switch v-model="localData.showButtons" />
    </el-form-item>
    <el-form-item label="开启单选">
      <el-switch v-model="localData.highlightCurrentRow" />
    </el-form-item>
    <el-form-item label="开启多选">
      <el-switch v-model="localData.showCheckbox" />
    </el-form-item>
    <el-form-item label="翻页保留选项" v-if="localData.showCheckbox">
      <el-switch v-model="localData.reserveSelection" />
    </el-form-item>
    <el-form-item label="row-key">
      <el-input v-model="localData.rowKey" placeholder="请输入row-key" />
    </el-form-item>
    <el-form-item label="最大高度">
      <el-input-number v-model="localData.maxHeight" controls-position="right" placeholder="请输入最大高度" />
    </el-form-item>
    <el-form-item label="重复校验标识">
      <el-input v-model="localData.uniqFields" placeholder="多个标识用逗号分隔" />
    </el-form-item>
    <el-form-item label="数据配置">
      <span style="margin-right: 8px">{{ getDataType }}</span>
      <text-edit-button type="primary" link @click="openDialog">数据配置</text-edit-button>
    </el-form-item>

    <drag-dialog title="数据设置" v-model="showDialog">
      <div class="data-container">
        <div class="header">
          <div>数据来源</div>
          <el-radio-group v-model="curEditData.sourceType" @change="handleSourceTypeChange">
            <el-radio label="接口数据" value="dynamic" />
            <el-radio label="已有数据" value="provide" />
            <el-radio label="静态数据" value="static" />
          </el-radio-group>
        </div>
        <div class="content">
          <el-form label-position="right" label-width="100px" label-suffix=":">
            <template v-if="curEditData.sourceType == 'dynamic'">
              <custom-ajax-setting v-model="curEditData" :options="formJson" :props="ajaxSettingProps" :typeOptions="typeOptions" />
            </template>
            <template v-else-if="curEditData.sourceType == 'provide'">
              <el-form-item label="jsonpath">
                <el-input v-model="curEditData.jsonPath" placeholder="请输入jsonpath" />
              </el-form-item>
            </template>
            <template v-else>
              <el-form-item label="静态数据">
                <el-input type="textarea" v-model="curEditData.staticData" :rows="20" placeholder="请输入静态json格式数据" />
              </el-form-item>
            </template>
          </el-form>
        </div>
      </div>
      <template #footer>
        <dialog-footer @ok="submit" @cancel="cancel" />
      </template>
    </drag-dialog>
  </div>
</template>

<script>
import { searchModel } from '@code/api/code/model/info';
import customAjaxSetting from '../../../components/customAjaxSetting.vue';
import { cloneDeep } from 'lodash-es';
import paginationList from '@/components/Code/config/pagination';

export default {
  name: 'AnvilTableConfig',
  components: { customAjaxSetting },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    formJson: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      localData: {},
      showDialog: false,
      typeOptions: [
        {
          label: '注册接口调用',
          value: 'url'
        },
        {
          label: '模型接口调用',
          value: 'urlModel'
        },
        {
          label: '本地接口调用',
          value: 'urlLocal'
        }
      ],
      ajaxModelList: [],
      ajaxApiList: [],
      ajaxSettingProps: {
        type: 'loadType',
        url: 'searchUrl',
        params: 'searchParams'
      },
      curEditData: {},
      paginationList
    };
  },
  computed: {
    getDataType() {
      switch (this.localData.sourceType) {
        case 'static':
          return '静态数据';
        case 'provide':
          return `已有数据`;
        case 'dynamic':
          return '接口数据';
        default:
          return '静态数据';
      }
    }
  },
  watch: {
    data: {
      handler(newVal) {
        if (newVal) {
          this.localData = newVal;
          this.init();
        }
      },
      deep: true,
      immediate: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:data', newVal);
      },
      deep: true
    }
  },
  mounted() {},
  methods: {
    // 处理老数据兼容
    init() {
      if (this.localData && !this.localData.searchParams) {
        this.localData.searchParams = {};
      }
      if (this.localData && !this.localData.sourceType) {
        this.localData.sourceType = 'dynamic';
      }
    },
    openDialog() {
      this.curEditData = cloneDeep(this.localData);
      if (this.curEditData.staticData) {
        this.curEditData.staticData = JSON.stringify(this.localData.staticData, null, 2);
      }
      this.showDialog = true;
    },
    submit() {
      try {
        if (this.curEditData.staticData) {
          this.curEditData.staticData = JSON.parse(this.curEditData.staticData);
        }
        for (let key in this.curEditData) {
          this.localData[key] = this.curEditData[key];
        }
        this.cancel();
      } catch (e) {
        this.msgError('请输入正确的json格式数据！', e);
      }
    },
    cancel() {
      this.showDialog = false;
    },
    handleSourceTypeChange(v) {
      delete this.curEditData.loadType;
      delete this.curEditData.jsonPath;
      delete this.curEditData.staticData;
      this.curEditData.searchUrl = '';
      if (v == 'static') {
        this.curEditData.staticData = '[{\r\r}]';
      } else if (v == 'dynamic') {
        this.curEditData.loadType = 'url';
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.data-container {
  width: 100%;

  .header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }

  .content {
    width: 100%;
    height: 500px;
    overflow: auto;
    border: 1px solid rgb(220 223 230);
    padding: 8px 24px;
  }
}
</style>
